<template>
  <van-popup
    round
    class="time-selector"
    v-model:show="visible"
    closeable
    position="bottom"
    :style="{ height: '80%' }"
    >
      <div class="head">
        选择配送时间
      </div>

      <div class="expect-time">
        预计送达时间：<span class="c-red">{{ getTimeText() }}</span>
      </div>

      <div class="time-box">
        <van-sidebar class="day-list" v-model="day" @change="onDayChange">
          <van-sidebar-item :title="getDayText(item)" v-for="(item, i) in dayList" :key="i"/>
          <van-sidebar-item v-if="dayList.length <= 7" title="更多日期" @click="onMoreDate"/>
        </van-sidebar>

        <div class="time-list">
          <div class="time-item" :class="{active: time === item}" v-for="item in timeList" :key="item" @click="handleSelectTime(item)">{{item}}</div>
        </div>

      </div>

      <van-button class="confirm-btn" type="danger" block @click="handleConfirm">确定</van-button>
    </van-popup
  >
</template>

<script>
import {getCurrentDays} from '@/utils'
import {Toast} from 'vant'
import moment from 'moment'
const dayMap = {
  1: '周一',
  2: '周二',
  3: '周三',
  4: '周四',
  5: '周五',
  6: '周六',
  0: '周日',
}
export default {
  data() {
    return {
      visible: false,
      day: 0,
      date: null,
      time: '',
      dayList: [],
      timeList: []
    }
  },
  methods: {
    show(orderData) {
      this.visible = true
      this.date = new Date(orderData.startTime)
      this.time = orderData.startTime.slice(11, 16) + ' - ' + orderData.endTime.slice(11, 16)
    },
    handleLocation() {
    },
    handleSelectType(index) {
      this.selectType = index
    },
    handleSelectTime(item) {
      this.time = item
    },
    handleConfirm() {
      if (!this.time) {
        Toast.fail('请选择配送时间段！')
        return
      }
      this.visible = false
      this.$emit('confirm', {
        timeText: this.getTimeText(),
        date: moment(this.date).format('YYYY-MM-DD'),
        time: this.time
      })
    },
    getDayText(item) {
      const current = new Date()
      let text = ''
      if (current.getMonth() === item.getMonth()) {
        if (current.getDate() === item.getDate()) {
          text = '今天'
        } else if (current.getDate() + 1 === item.getDate()) {
          text = '明天'
        } else if (current.getDate() + 2 === item.getDate()) {
          text = '后天'
        }
      }
      return moment(item).format('MM-DD') + `(${text || dayMap[item.getDay()]})`
    },
    getTimeText () {
      return `${this.getDayText(this.date)}  ${this.time}`
    },
    getDayList(days) {
      const dayList = getCurrentDays(days)
      const oneDay = dayList[0]
      if (oneDay.getHours() >= 20) {
        // 超过20点，当天不送
        dayList.shift()
      }
      this.dayList = dayList
    },
    getTimeList() {
      // 最早9点起送
      const timeList = []
      let start = 9
      const current = new Date()
      const selectDate = this.dayList[this.day]
      if (current.getMonth() === selectDate.getMonth() && current.getDate() === selectDate.getDate()) {
        // 当天
        start = current.getHours() + 3 >= 9 ? current.getHours() + 4 : start
      }
      for(let i = start; i <= 23; i++) {
        const sta = i
        const end = i === 23 ? 23 : i + 1
        timeList.push(`${sta < 10 ? '0' + sta : sta}:00 - ${end}:${(sta === 23 && end === 23) ? '59' : '00'}`)
      }
      this.timeList = timeList
    },
    onMoreDate() {
      this.getDayList(31)
    },
    onDayChange() {
      this.date = this.dayList[this.day]
      this.time = ''
      this.getTimeList()
    }
  },
  created() {
    this.getDayList(7)
    this.getTimeList()
  }
};
</script>

<style lang="less" scoped>
.time-selector {
  font-size: 14px;
  .head {
    line-height: 48px;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid #f5f5f5;
    background: #fff;
  }
  .expect-time {
    line-height: 48px;
    font-weight: bold;
    padding-left: 18px;
    border-bottom: 1px solid #f5f5f5;
  }
  .time-box {
    height: calc(100% - 138px);
    .day-list {
      float: left;
      width: 120px;
      max-height: 100%;
    }
    .time-list {
      margin-left: 130px;
      max-height: 100%;
      overflow: auto;
      .time-item {
        line-height: 40px;
        font-weight: bold;
        &.active {
          color: #fc4f47;
        }
      }
    }
    .van-picker {
      margin-left: 160px;
    }
  }
  .confirm-btn {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
</style>
